import React, { useState, useEffect } from 'react';
import { ContentSection } from './sections/ContentSection';
import { RemindersSection } from './sections/RemindersSection';
import { FavoritesSection } from './sections/FavoritesSection';
import { GoalsSection } from './sections/GoalsSection';
import { SettingsSection } from './sections/SettingsSection';
import { BackgroundNoiseSection } from './sections/BackgroundNoiseSection';
import '../styles/theme.css';
import '../styles/animations.css';
import './App.css';

const sections = [
  { id: 'content', label: 'Content', icon: '📚' },
  { id: 'reminders', label: 'Reminders', icon: '⏰' },
  { id: 'favorites', label: 'Favorites', icon: '⭐' },
  { id: 'goals', label: 'Goals', icon: '🎯' },
  { id: 'settings', label: 'Settings', icon: '⚙️' },
  { id: 'background-noise', label: 'Background Noise', icon: '🎵' }
];

function App() {
  const [currentSection, setCurrentSection] = useState('reminders');
  const [settings, setSettings] = useState(null);

  useEffect(() => {
    chrome.storage.local.get(['settings'], (result) => {
      const userSettings = result.settings || {
        theme: 'dark',
        notificationsEnabled: true,
        badgeEnabled: true,
        notificationSound: 'beep'
      };
      setSettings(userSettings);
      document.body.setAttribute('data-theme', userSettings.theme || 'dark');
    });
  }, []);

  if (!settings) {
    return <div className="loading">Loading...</div>;
  }

  return (
    <div className="newtab-app">
      <header className="app-header">
        <h1>🌱 Longevity Dashboard</h1>
      </header>

      <div className="app-container">
        <aside className="sidebar">
          <nav className="nav-menu">
            {sections.map((section) => (
              <button
                key={section.id}
                className={`nav-item ${currentSection === section.id ? 'active' : ''}`}
                onClick={() => setCurrentSection(section.id)}
              >
                <span>{section.icon}</span>
                {section.label}
              </button>
            ))}
            <a
              href="longevity-history.html"
              target="_blank"
              className="nav-item"
            >
              <span>📊</span>
              History Analytics
            </a>
          </nav>
        </aside>

        <main className="content-area">
          {currentSection === 'content' && <ContentSection />}
          {currentSection === 'reminders' && <RemindersSection />}
          {currentSection === 'favorites' && <FavoritesSection />}
          {currentSection === 'goals' && <GoalsSection />}
          {currentSection === 'settings' && <SettingsSection settings={settings} setSettings={setSettings} />}
          {currentSection === 'background-noise' && <BackgroundNoiseSection />}
        </main>
      </div>
    </div>
  );
}

export default App;

